<template>
  <div class="editSome">
    <div class="header-search">
      <el-button @click="goToSearch">查询</el-button>
      <el-button @click="openDailog('新增')">新增</el-button>
      <el-button @click="openDailog('编辑')">编辑</el-button>
    </div>
    <div class="tableBox margin-top height-100">
      <el-table :data="tableData" :style="tableStyles">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <AddEditDialog ref="addEditDialog" v-model:count="count" msg="小溪流" />
  </div>
</template>
<script setup lang="ts">
import { CSSProperties, onMounted, reactive, ref } from "vue";
import AddEditDialog from "../components/add-edit-dialog.vue";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";

const tableStyles = { height: `calc(100% - ${10}px)`, width: "100%" } as CSSProperties;

interface tableType {
  date: String;
  name: String;
  address: String;
}

const tableData: tableType[] = reactive([]);
const count = ref<number>(1);

onMounted(()=>{
  console.log('表格1的mounted')
})

/**
 * 点击查询按钮
 */
const goToSearch = () => {
  showFullScreenLoading();
  try {
    setTimeout(() => {
      for (let i = 0; i < 500; i++) {
        tableData.push({
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        });
      }
      console.log("tableData", tableData);
      tryHideFullScreenLoading();
    }, 500);
  } catch (error) {}
};

/**
 * 点击新增编辑按钮
 */
const addEditDialog = ref();
const openDailog = (title: String) => {
  const params = {
    title,
    isView: title === "查看",
    row: {}
  };
  if (title == "编辑") {
    params.row = {
      username: "小溪流",
      gender: 1,
      idCard: "88974383484747847",
      email: "793117268@qq.com",
      address: "中国辽宁"
    };
  }
  addEditDialog.value.acceptParams(params);
};
</script>
<style lang="scss">
.editSome {
  height: calc(100% - 32px);
}
</style>
